<template>
    <transition name="message-fade">
        <div v-if="visible" :style="styles" class="el-message" :class="typeClass">
            <el-icon class="el-message__icon" :name="type" :size="14"></el-icon>
            <p class="el-message__content">{{ message }}</p>
            <el-icon @click="close" class="el-message__closeBtn" name="close" :size="16"></el-icon>
        </div>
    </transition>
</template>

<script>
import { defineComponent } from 'vue-demi';

export default defineComponent({
    props: {
        type: {
            // 消息框的类型: [普通，警告，错误，成功]。默认为成功
            type: String,
            default: 'success',
            validator(val) {
                return ['info', 'warning', 'error','success'].includes(val)
            }
        },
        duration: {
            // 消息框多久自动关闭，默认是 3s
            type: Number,
            default: 3000
        },
        message: {
            // 消息内文字
            type: String,
            default: "一条新消息"
        },
        position: {
            // 消息框出现的位置： 左 中 右
            type: String,
            default: "middle",
            validator(val) {
                return ['left', 'right', 'middle'].includes(val)
            }
        }
    },
    data() {
        return {
            visible: false,
            vTop: 0
        }
    },
    // setup(props){
    //     const dom = ref(null);
    //     const visible = ref(false);
    //     const vTop = ref(0)
    //     const styles = computed(()=>({top:vTop + 'px'}))
    //     const close = ()=>visible.value = false
    //     watch(visible,(newVal)=>{
    //         if(!newVal){
    //             // 关闭时，销毁组件
    //             dom.value.addEventListener('transitionend',()=>{
    //                 this.$destroy()
    //             })
    //             this.$emit('close')
    //         }
    //     })
    //     return {
    //         visible,
    //         vTop,
    //         styles,
    //         close,
    //         dom
    //     }
    // },
    mounted() {
        this.autoClose()
        document.querySelector('body').appendChild(this.$el);
        this.visible = true;
    },
    methods: {
        close() {
            this.visible = false
        },
        autoClose() {
            if (this.duration) {
                // 如果duration是0，则不会自动关闭
                let timer = setTimeout(() => {
                    this.visible = false
                }, this.duration)
                this.$once('hook:beforeDestroy', () => { clearTimeout(timer) })
            }
        }
    },
    computed: {
        posObj() {
            if (this.position == 'middle') {
                return {
                    left: 'calc(50% - 190px)',
                }
            } else if (this.position == 'left') {
                return {
                    left: '16px'
                }
            } else {
                return {
                    right: '16px'
                }
            }
        },
        styles() {
            return {
                top: this.vTop + 'px',
                ...this.posObj
            }
        },
        typeClass() {
            return {
                'is-info': this.type == 'info',
                'is-warning': this.type == 'warning',
                'is-error': this.type == 'error',
                'is-success': this.type == 'success',
            }
        }
    },
    watch: {
        visible(newVal) {
            if (!newVal) {
                // 关闭时，销毁组件
                this.$el.addEventListener('transitionend', () => {
                    this.$destroy()
                })
                this.$emit('close')
            }
        }
    },
    destroyed() {
        this.$el.parentNode.removeChild(this.$el);
    }
})
</script>

<style lang="scss" scoped>
@import "./index.scss"
</style>
